﻿
@{
    ViewData["Title"] = "菜单设置按钮";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
    var errmsg = TempData["errMsg"];
}
<div id="app" v-clock>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" action="@Url.Action("SetButton")" method="post" style="width: 60%;">
        @Html.AntiForgeryToken()
        <el-form-item>
            <el-col :span="3">
                #
            </el-col>
            <el-col :span="7" align="center">
                按钮名称
            </el-col>
            <el-col :span="7"  align="center">
                按钮图标
            </el-col>
            <el-col :span="7"  align="center">
                按钮提示[Title]
            </el-col>
        </el-form-item>
        <el-form-item v-bind:label="v.SourceName" v-for="(v,i) in ruleForm">
            <el-col :span="3">
                <el-checkbox v-model="v.IsSelected"></el-checkbox>
                <input type="hidden" v-model="v.IsSelected" v-bind:name="'list['+i+'].IsSelected'"/>
            </el-col>
            <el-col :span="7">
                <el-input v-model="v.ButtonName" size="small" class="col-12" v-bind:name="'list['+i+'].ButtonName'" required v-bind:disabled="!v.IsSelected"></el-input>
            </el-col>
            <el-col :span="7">
                <el-input v-model="v.Icons" size="small" class="col-12" v-bind:name="'list['+i+'].Icons'" required v-bind:disabled="!v.IsSelected"></el-input>
            </el-col>
            <el-col :span="7">
                <el-input v-model="v.Titles" size="small" class="col-12" v-bind:name="'list['+i+'].Titles'" required v-bind:disabled="!v.IsSelected"></el-input>
            </el-col>
            <input type="hidden" v-model="v.ButtonId" v-bind:name="'list['+i+'].ButtonId'"/>
            <input type="hidden" v-model="v.MenuId" v-bind:name="'list['+i+'].MenuId'"/>
            <input type="hidden" v-model="v.Id" v-bind:name="'list['+i+'].Id'"/>
            <input type="hidden" v-model="v.SourceName" v-bind:name="'list['+i+'].SourceName'"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @@click="submitForm('ruleForm')" size="small">保存</el-button>
            <el-button @@click="resetForm('ruleForm')" size="small">重置</el-button>
            <el-button icon="el-icon-back" size="small" @@click="funBack">返回 菜单管理</el-button>
        </el-form-item>
        <input type="hidden" v-model="menuId" name="menuId" />
    </el-form>
</div>
@section Styles
{
    <style type="text/css">
        .el-form-item {
            margin: 0 !important;
        }
    </style>
}
@section Scripts
    {
    <script type="text/javascript">
        @if (errmsg!=null&&!string.IsNullOrEmpty(errmsg.ToString()))
        {
            //系统异常信息 输出
          @:$(function() { @(Html.Raw(errmsg)); });
        }

        new Vue({
            el: "#app",
            data:function () {
                return {
                    ruleForm: @Html.Raw(ViewBag.list),
                    menuId:'@ViewBag.menuId',
                    rules: {
                        ButtonName: [
                            { required: true, message: '请输入按钮名称', trigger: 'blur' }
                        ]
                    }
                };
            },
            methods: {
                submitForm: function(formName) {
                    this.$refs[formName].validate(function(valid) {
                        if (valid) {
                            $("form").eq(0).submit();
                        } else {
                            return false;
                        }
                    });
                },
                resetForm: function(formName) {
                    var data = JSON.stringify(@Html.Raw(ViewBag.list));
                    this.ruleForm = JSON.parse(data);
                },
                funBack: function() {
                    window.history.go(-1);
                }
            }
        })
    </script>
}